<template>
   <div>
      <div style="width: 100%;height: 250px; display: flex; margin-bottom: 15px;">
         <ForumSlideshowVue :SystemData="SystemData" />
         <ForumNoticeHelpChannelVue :SystemData="SystemData" />
      </div>
      <div class="Forum-classify">
         <ul>
            <li :class="{ classifyActive: classifyActive === 0 }" @click="AllpostsList">看帖</li>
            <li :class="{ classifyActive: classifyActive === 2 }" @click="latestReplyPostsList(2)">最新回复</li>
            <li :class="{ classifyActive: classifyActive === 1 }" @click="recommendPostsList(1)">推荐</li>
            <li v-for="(item, index) in SystemData.SystemClassifyList.slice(0, 8)" :key="index"
               @click="GetclassifyData(item, index + 3)" :class="{ classifyActive: classifyActive === index + 3 }">
               {{ item.classify_name }}
            </li>
         </ul>
         <div class="Chat-Channel-Open">
            <div class="sousuo">
               <span class="iconfont icon-sousuo1"></span>
               <input v-model="searchValue" type="text" placeholder="社区搜索" @keyup.enter="handleEnter">
            </div>
         </div>
      </div>
      <div style="width: 100%;display: flex;">
         <ForumPostsListVue :SystemData="SystemData" @getMorePostslist="getMorePostslist" />
         <ForumPublishVue :SystemData="SystemData" />
      </div>
      <SidebarLeftVue :SystemData="SystemData" />
      <!-- <SidebarRightVue :SystemData="SystemData" /> -->
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";

import SidebarLeftVue from "./sidebar-left.vue"
// import SidebarRightVue from "./sidebar-right.vue"
import ForumClassifyVue from "./forum-classify.vue"
import ForumSlideshowVue from "./forum-slideshow.vue"
import ForumNoticeHelpChannelVue from "./forum-notice-help-channel.vue"
import ForumPostsListVue from './forum-posts-list.vue'
import ForumPublishVue from './forum-publish.vue'

const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: {},
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
});
const classifyActive = ref(0)
const state = ref({
   page: 1,
   limit: 10,
   classifyId: '' as string | number,
   postsType: 0,
})

// 获取帖子列表
const getpostslist = async (type?: number) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-posts/FrontPostslist', {
      method: 'POST',
      data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         page: state.value.page,
         limit: state.value.limit,
         classifyId: state.value.classifyId,
         postsType: state.value.postsType,
      }
   })
   if (type) props.SystemData.SystemPostsList = [] // 清空
   props.SystemData.SystemPostsTopList = res.data.toplist
   props.SystemData.SystemPostsList = [...props.SystemData.SystemPostsList, ...res.data.list] // 实际数据
   if (res.data.list.length < 10 && props.SystemData.SystemPostsList.length > 10) {
      ElMessage.warning("没有更多了")
   }
}
// 点击全部 
const AllpostsList = async () => {
   // if (!state.value.classifyId) return
   classifyActive.value = 0
   state.value.classifyId = ''
   state.value.page = 1
   state.value.limit = 10
   getpostslist(1)
}
// 点击推荐 
const recommendPostsList = async (index: number) => {
   // if (!state.value.classifyId) return
   classifyActive.value = index
   state.value.classifyId = 0
   state.value.page = 1
   state.value.limit = 10
   getpostslist(1)
}
// 点击最新回复 
const latestReplyPostsList = async (index: number) => {
   // if (!state.value.classifyId) return
   classifyActive.value = index
   state.value.classifyId = 1
   state.value.page = 1
   state.value.limit = 10
   getpostslist(1)
}
// 点击分类 请求分类数据
const GetclassifyData = async (item: any, index: number) => {
   if (classifyActive.value === index) {
      classifyActive.value = index
   } else {
      classifyActive.value = index
      state.value.page = 1
      state.value.limit = 10
      state.value.classifyId = item._id
      getpostslist(1)
   }
}
// 加载更多
const getMorePostslist = () => {
   state.value.page = state.value.page + 1
   // 判断
   getpostslist()
}
getpostslist()



// 搜索框监听回车事件
const searchValue = ref("")
const handleEnter = () => {
   // ElMessage.warning('社区内搜索开发中...')
   window.open('/search?s=' + searchValue.value, '_blank')
}


</script>
<style lang="scss" scoped>
.Forum-classify {
   padding: 0 15px 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;

   ul {
      flex: 1;
      display: flex;
      margin-right: 15px;
      position: relative;

      li {
         padding: 8px 18px;
         margin-right: 10px;
         background: #fff;
         color: #555;
         border-radius: 6px;
         transition: all 0.2s ease-in-out;
         box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.24);

         &:hover {
            background-color: var(--aoir-color-primary);
            color: #FFF;
            cursor: pointer;
         }

         &:active {
            transform: translateY(2px);
         }
      }

      .classifyActive {
         background-color: var(--aoir-color-primary);
         color: #FFF;
      }
   }

   .Chat-Channel-Open {
      display: flex;
      align-items: center;

      .sousuo {
         position: relative;

         input {
            width: 220px;
            height: 38px;
            border: 0;
            font-size: 16px;
            background-color: #FFF;
            border-bottom: 1px solid #f5f6f7;
            border-radius: 4px;
            caret-color: var(--aoir-color-primary-2);
            padding: 0 10px 0 35px;
            border-radius: 50px;
            box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

            &::placeholder {
               color: #CCD0DB;
            }
         }

         .iconfont {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 600;
            color: #444;
         }
      }
   }
}
</style>